<template>
  <div class="manage">
    <el-dialog
        title="新增派车工单"
        :visible.sync="dialogVisible"
        width="30%"
        :destroy-on-close="true"
        style="text-align: center"
        :before-close="handleClose"
    >
      <!--用户的表单信息-->
      <el-form ref="form" :rules="rules" :inline="false" :model="form" label-width="80px" label-position="right">
        <el-form-item label="派车事宜" prop="planName">
          <el-input placeholder="请输入派车事宜" v-model="form.planName"></el-input>
        </el-form-item>
        <el-form-item label="用车时间" prop="startTime">
          <el-date-picker
              style="width: 100%;"
              v-model="value"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
              align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出发地" prop="origin">
          <el-input placeholder="请输入出发地" v-model="form.origin"></el-input>
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
          <el-input placeholder="请输入目的地" v-model="form.destination"></el-input>
        </el-form-item>
        <el-form-item label="用车人员数量" prop="number">
          <el-input placeholder="请输入用车人员数量" v-model="form.number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
          </span>
    </el-dialog>

    <!--编辑工单-->
    <el-dialog
        title="编辑派车工单"
        :visible.sync="dialogEditVisible"
        width="30%"
        :destroy-on-close="true"
        style="text-align: center"
        :before-close="handleEditClose"
    >
      <!--用户的表单信息-->
      <el-form ref="formEdit" :rules="rulesEdit" :inline="false" :model="formEdit" label-width="80px" label-position="right">
        <el-form-item label="派车事宜" prop="planName">
          <el-input placeholder="请输入派车事宜" v-model="formEdit.planName"></el-input>
        </el-form-item>
        <el-form-item label="用车时间" prop="startTime">
          <el-date-picker
              style="width: 100%;"
              v-model="value1"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出发地" prop="origin">
          <el-input placeholder="请输入出发地" v-model="formEdit.origin"></el-input>
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
          <el-input placeholder="请输入目的地" v-model="formEdit.destination"></el-input>
        </el-form-item>
        <el-form-item label="用车人员数量" prop="number">
          <el-input placeholder="请输入用车人员数量" v-model="formEdit.number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="cancelEdit">取 消</el-button>
              <el-button type="primary" @click="submitEdit">确 定</el-button>
          </span>
    </el-dialog>
    <div class="manage-header">
      <el-button @click="handleAdd" type="primary" size="mini">
        + 新增
      </el-button>
<!--                form搜索区域-->
      <el-form :inline="true" :model="userForm" size="mini">
        <el-form-item label="派车工单名称：" prop="planName">
          <el-input v-model="userForm.planName" placeholder="请输入派车工单名称"></el-input>
        </el-form-item>
        <el-form-item label="出发地：" prop="origin">
          <el-input v-model="userForm.origin" placeholder="请输入派车出发地"></el-input>
        </el-form-item>
        <el-form-item label="目的地：" prop="destination">
          <el-input v-model="userForm.destination" placeholder="请输入派车目的地"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table">
      <el-table
          stripe
          height="90%"
          border
          size="mini"
          :data="tableData.slice((paginations.current-1)*paginations.pageSize,paginations.current*paginations.pageSize)"
          style="width: 100%">
        <el-table-column
            fixed
            prop="planId"
            label="派车工单编号"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="planName"
            label="派车工单名称"
            align="center"
        >
<!--          <template slot-scope="scope">-->
<!--            <div slot="reference" class="name-wrapper">-->
<!--              <el-tag size="mini" effect="dark" :type="(scope.row.type==='危险作业'?'danger':(scope.row.type==='消防安全'?'warning':''))">{{ scope.row.type }}</el-tag>-->
<!--            </div>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
            prop="startTime"
            label="用车开始时间"
            align="center"
            width="200"
        >
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="用车结束时间"
            align="center"
            width="200"
        >
        </el-table-column>
        <el-table-column
            prop="origin"
            label="出发地"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="destination"
            label="目的地"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="number"
            label="用车人员数量"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="createByName"
            label="用车人员"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="deptName"
            label="部门"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="工单创建时间"
            align="center"
            width="200"
        >
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="200px"
            v-if="isAdmin"
        >
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       style="background-color: blue"
                       @click="edit(scope.row)"
                       v-if="isAdmin"
            >
              编辑
            </el-button>
            <el-button type="info"
                       icon="el-icon-s-tools"
                       size="mini"
                       :style="{background: 'red'}"
                       @click="handleDelete(scope.row)"
                       v-if="isAdmin"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="paginations.current"
            :page-sizes="[5 ,10, 20, 50, 100]"
            :page-size="paginations.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginations.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {planAdd, planDelete, planEdit, planList} from "@/api/delivery";
import {mapGetters} from "vuex";
import Cookie from "js-cookie";
export default {
  name: "BusinessManagement",
  // computed: {
  //   ...mapGetters(['hasPermission']),
  //   isAdmin(){
  //     return this.hasPermission(this.$store.state.userInfo.roleName)
  //   },
  // },
  data(){
    return{
      dialogVisible: false,
      dialogEditVisible:false,
      isAdmin:false,
      form: {
        planName:'',
        startTime:'',
        endTime:'',
        origin:'',
        destination:'',
        number:''
      },
      formEdit:{
        planId:'',
        planName:'',
        startTime:'',
        endTime:'',
        origin:'',
        destination:'',
        number:''
      },
      rules: {
        planName: [
          {
            required: true,
            message: '请输入派车事宜'
          }
        ],
        // startTime: [
        //   {
        //     required: true,
        //     message: '请输入用车开始时间'
        //   }
        // ],
        // endTime: [
        //   {
        //     required: true,
        //     message: '请输入用车结束时间'
        //   }
        // ],
        origin: [
          {
            required: true,
            message: '请输入用车出发地'
          }
        ],
        destination: [
          {
            required: true,
            message: '请输入用车目的地'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入用车人员数量'
          }
        ],
      },
      rulesEdit: {
        planName: [
          {
            required: true,
            message: '请输入派车事宜'
          }
        ],
        // startTime: [
        //   {
        //     required: true,
        //     message: '请输入用车开始时间'
        //   }
        // ],
        // endTime: [
        //   {
        //     required: true,
        //     message: '请输入用车结束时间'
        //   }
        // ],
        origin: [
          {
            required: true,
            message: '请输入用车出发地'
          }
        ],
        destination: [
          {
            required: true,
            message: '请输入用车目的地'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入用车人员数量'
          }
        ],
      },
      tableData: [],
      paginations: {
        current: 1, //当前页
        pageSize: 10, //一页显示多少条
        total: 0 //数据总数
      },
      value:'',
      value1:'',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      userForm:{
        planName:'',
        origin:'',
        destination:''
      }
    }

  },
  created() {
    // console.log('userInfo',this.$store.state.userInfo);
    // if (this.$store.state.userInfo.roleName !==  '超级管理员' && this.$store.state.userInfo.roleName !==  '管理员'){
    //   this.isAdmin = false
    // }else{
    //   this.isAdmin  = true
    // }
    if(Cookie.get('roleName')  !==  '超级管理员' && Cookie.get('roleName')  !==  '管理员' ){
      this.isAdmin  = false
    }else {
      this.isAdmin  = true
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getList(this.paginations.current,this.paginations.pageSize,this.userForm)
    },
    changeTime(val){
      console.log('VAL',val)
      console.log('VALUE',this.value)
    },
    //提交用户表单
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //后续对表单数据的处理
          if(this.value && this.value!=='' && this.value.length !== 1 && this.value[0]!==this.value[1]){
            this.form.startTime = this.value[0]
            this.form.endTime = this.value[1]
            planAdd(this.form).then((res)=>{
              //新增用户的接口
              if(res.code===200){
                console.log('新增成功')
                this.$message.success({
                  message:res.msg,
                  type:'success'
                })
                this.getList(this.paginations.current,this.paginations.pageSize,this.userForm)
              }else{
                console.log(res.msg)
                this.$message.error(res.msg)
                this.getList(this.paginations.current,this.paginations.pageSize,this.userForm)
              }
            })
            console.log(this.form, 'form')
            //清空表单数据
            this.$refs.form.resetFields()
            this.form.planName = ''
            this.form.startTime = ''
            this.form.endTime = ''
            this.form.origin = ''
            this.form.destination = ''
            this.form.number = ''
            //关闭弹窗
            this.dialogVisible = false
          }else{
            this.$message.error('请选择正确的时间区间！')
          }
        }
      })
    },
    //弹窗关闭的时候
    handleClose () {
      this.$refs.form.resetFields()
      this.form.planName = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.origin = ''
      this.form.destination = ''
      this.form.number = ''
      this.value = ''
      this.value1 =''
      this.dialogVisible = false
    },
    cancel () {
      this.handleClose()
    },
    cancelEdit(){
      this.handleEditClose()
    },
    handleEditClose(){
      this.dialogEditVisible = false
      this.$refs.formEdit.resetFields()
      this.formEdit.planId = ''
      this.formEdit.planName = ''
      this.formEdit.startTime = ''
      this.formEdit.endTime = ''
      this.formEdit.origin = ''
      this.formEdit.destination = ''
      this.formEdit.number = ''
      this.value = ''
      this.value1 =''
    },
    edit(row){
      this.value1 = []
      this.dialogEditVisible = true
      this.formEdit.planId = row.planId
      this.formEdit.planName = row.planName
      this.formEdit.origin = row.origin
      this.formEdit.destination = row.destination
      this.formEdit.number  = row.number
      this.value1[0] = row.startTime
      this.formEdit.startTime = this.value1[0]
      this.value1[1] = row.endTime
      this.formEdit.endTime = this.value1[1]
    },
    submitEdit(){
      this.$refs.formEdit.validate((valid)=>{
        if(valid){
          planEdit(this.formEdit).then(res=>{
            if(res.code === 200){
              this.$message.success(res.msg)
              this.dialogEditVisible = false
              this.$refs.formEdit.resetFields()
              this.getList(this.paginations.current,this.paginations.pageSize,this.userForm)
              // this.refreshPage()
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    handleDelete (row) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText:'取消',
        type:"warning"
      }).then(() => {
        planDelete({planId: row.planId}).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getList(this.paginations.current, this.paginations.pageSize,this.userForm)
          }else{
            this.$message.error(res.msg)
          }
        })
      }).catch(()=>{

      })
    },
    //分页方法 前端分页
    handleCurrentChange(val) {
      this.paginations.current = val
      this.getList(val,this.paginations.pageSize,this.userForm);
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val
      this.getList(this.paginations.current ,val,this.userForm);
    },
    //获取的列表数据
    getList (current,pageSize,data) {
      //获取的列表数据
        planList(data).then(resp => {
          if (resp.code === 200) {
            console.log(resp.data)
            this.tableData = resp.data
            this.paginations.total = resp.data.length
            this.paginations.current = current
            this.paginations.pageSize = pageSize
          }else{
            this.$message.error(resp.msg)
          }
        })
    },
    handleAdd () {
      this.dialogVisible = true
      this.form.planName = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.origin = ''
      this.form.destination = ''
      this.form.number = ''
      this.value = ''
      this.value1 =''
    },
    //列表的查询
    onSubmit () {
      this.getList(this.paginations.current,this.paginations.pageSize,this.userForm)
    },
  }
}
</script>

<style lang="less" scoped>
.manage{
  height: 100%;
  .manage-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dotted lightgrey;
    padding-bottom: 1em;
  }
  .common-table{
    margin-top: 20px;
    position: relative;
    height: 90%;
    .pager{
      position: absolute;
      bottom: 0;
      right: 20px;
    }
  }
}
</style>
